<template>
  <view class="page-wrapper">
    <view class="item">
      <u-cell-group :border="false">
        <u-cell :border="false" :titleStyle="titleStyle" :rightIconStyle="rightIconStyle" isLink
          url="/minePack/user/personalInformation/index">
          <view slot="title" class="u-slot-title">
            <u-avatar :src="getUserInfo.headImgUrl" shape="circle" size="60"></u-avatar>
            <view class="u-slot-text">{{getUserInfo.nickname}}</view>
          </view>
        </u-cell>
        <u-cell :border="false" title="收获地址" :titleStyle="titleStyle" isLink :rightIconStyle="rightIconStyle"
          url="/minePack/user/accountSetting/shippingAddress"></u-cell>
      </u-cell-group>
    </view>
    <view class="item">
      <u-cell-group :border="false">
        <u-cell :border="false" title="消息推送设置" :titleStyle="titleStyle" isLink :rightIconStyle="rightIconStyle"
          url="/minePack/user/accountSetting/messagePush"></u-cell>
        <u-cell :border="false" title="隐私设置" :titleStyle="titleStyle" isLink :rightIconStyle="rightIconStyle"
          url="/minePack/user/accountSetting/privacy"></u-cell>
      </u-cell-group>
    </view>
    <view class="item">
      <u-cell-group :border="false">
        <u-cell :border="false" title="清理缓存" :titleStyle="titleStyle" isLink :rightIconStyle="rightIconStyle" url=""
          @click="cleanCache"></u-cell>
        <u-cell :border="false" title="意见反馈" :titleStyle="titleStyle" isLink :rightIconStyle="rightIconStyle"
          url="/minePack/user/accountSetting/feedback"></u-cell>
        <u-cell :border="false" title="关于卡友之家" :value="appVersion" :titleStyle="titleStyle" isLink
          :rightIconStyle="rightIconStyle"
          :url="`/minePack/user/accountSetting/about?version=${appVersion}`"></u-cell>
      </u-cell-group>
    </view>
    <view class="action-wrapper">
      <button class="next-step" @click="quitApp">退出登录</button>
    </view>
  </view>
</template>

<script>
  import {
    mapGetters
  } from 'vuex'

  export default {
    data() {
      return {
        titleStyle: {
          'fontSize': '28rpx',
          'fontWeight': '400',
          'color': 'rgba(0, 0, 0, 0.65)'
        },
        rightIconStyle: {
          'fontSize': '14px'
        },
        appVersion: '1.5.1036',
        headImgUrl: '@/static/mine/user_avatar.png',
        cacheSize: '67.12MB'
      }
    },
    methods: {
      cleanCache() {
        uni.showModal({
          title: "清除缓存",
          content: this.cacheSize,
          showCancel: false,
          confirmText: "确认",
          confirmColor: '#CF1A1B',
          success: res => {
            if (res.confirm) {
              uni.showToast({
                title: '清除成功'
              })
            }
          }
        })
      },
      quitApp() {
        uni.showModal({
          title: "您确认要退出登录吗?",
          content: '',
          confirmText: "确认",
          confirmColor: '#CF1A1B',
          success: res => {
            if (res.confirm) {
              uni.removeStorageSync('access_token')
              uni.removeStorageSync('userInfo')
			  uni.removeStorageSync('authSource')
              uni.reLaunch({
                  url:"/pages/index/index/index"
              })
			  uni.$emit('refreshIndex')
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })
      },
    },

    computed: {
      ...mapGetters('user', ['getUserInfo']),
    },
    onShow() {}
  }
</script>

<style lang="scss" scoped>
  .item {
    margin-bottom: 20rpx;
    background-color: #FFFFFF;

    .u-slot-title {
      display: flex;
      align-items: center;

      .u-slot-text {
        margin-left: 16rpx;
        font-size: 28rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
    }
  }

  .action-wrapper {
    position: fixed;
    width: 100%;
    bottom: 0;
    height: 178rpx;
    background: #FFFFFF;

    .next-step {
      height: 80rpx;
      line-height: 80rpx;
      background: #CF1A1B;
      border-radius: 8rpx;
      margin: 32rpx;
      color: #FFFFFF;
      font-size: 28rpx;
      font-weight: 400;
    }
  }
</style>